<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }

      .grid table {
        border-top: 1px solid #c2d89a;
        width: 100%;
        border-collapse: collapse;
      }

      .grid th,
      td {
        padding: 10;
        border: 1px dashed #f3dcab;
        height: 35px;
        line-height: 35px;
      }

      .grid th {
        background-color: #f3dcab;
      }

      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: #f3dcab;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label for="id"> 编号： </label>
              <input type="text" id="id" v-model="formData.id" disabled />
              <label for="name"> 名称： </label>
              <input type="text" id="name" v-model.trim="formData.name" @keyup.enter="onSubmit" />
              <button @click="onSubmit">提交</button>
            </div>
            <div style="border-top: 1px solid #c2d89a; margin-top: 10px; padding-top: 10px">
              图书总数：{{ totalCount }}
            </div>
          </div>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="v in books" :key="v.id">
              <td>{{ v.id }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.date | df('YYYY-MM-DD HH:mm:ss') }}</td>
              <td>
                <a href="" @click.prevent="edit(v)">修改</a>
                &nbsp;|&nbsp;
                <a href="" @click.prevent="del(v.id)">删除</a>
              </td>
            </tr>
            <tr v-show="isLoading">
              <td colspan="4">数据加载中...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 单位件组件：   *.vue    -->
    <script src="../vue.js"></script>
    <script src="../dayjs-v1.4.1.min.js"></script>
    <script src="../axios-v0.21.0.min.js"></script>
    <script>
      axios.defaults.baseURL = 'http://localhost:3000/';

      // 用来记录下一个id
      let nextId = 1;

      // 定义时间格式化的过滤器
      Vue.filter('df', (data, pattern) => dayjs(new Date(data)).format(pattern));

      /*
      图书管理-添加图书
      */
      var vm = new Vue({
        el: '#app',
        data: {
          // 记录当前的提交行为  add:添加, edit:修改
          submitAction: 'add',
          // 用来标识是否正在加载，ture：是, false：否
          isLoading: false,
          formData: {
            id: '',
            name: '',
          },
          books: [],
        },
        computed: {
          totalCount() {
            return this.books.length;
          },
        },
        methods: {
          loadBooks() {
            this.isLoading = true; // 标记为加载中
            return axios({
              method: 'GET',
              url: '/books',
            }).then((res) => {
              console.log(res);
              this.books = res.data;
              this.isLoading = false; // 标记为已加载完成
            });
          },
          edit(book) {
            this.submitAction = 'edit';
            this.formData.id = book.id;
            this.formData.name = book.name;
          },
          del(id) {
            // 如果要删除的id为正在修改的图书id，那么就不能删除
            if (id === this.formData.id) {
              return alert('不能删除正在修改中的图书');
            }

            axios({
              method: 'DELETE',
              url: `/books/${id}`,
            })
              .then(() => {
                this.loadBooks();
              })
              .catch(() => {
                alert('删除失败，请稍后重试');
              });
          },
          onSubmit() {
            // 展开表达式，将this.formData对象中的键值对都拿出来，方法这个新对象中
            var book = { ...this.formData, date: Date.now() };
            if (book.name === '') {
              return alert('图书名称不能为空');
            }
            // 在添加到数组中之前，先要判断该图书名称是否已存在
            //   some 函数接收的这个 回调函数 会在 some 函数内部循环调用
            //     如果循环调用时，某一次的返回值为 true，则终止循环，some 函数也返回 true，即为找到了
            //     如果循环调用时，某一次的返回值为 false，则进行下一个元素的循环调用
            //     如果循环完了，都返回false，则 some 函数也返回 false，即为没有找到
            if (this.books.some((v) => v.name === book.name)) {
              return alert('该图书已存在，请换个名称试试！');
            }

            let requestPromise = null;

            // 添加
            if (this.submitAction === 'add') {
              const { id, ...newBook } = book;
              requestPromise = axios({
                method: 'POST',
                url: '/books',
                data: newBook,
              })
                .then(() => {
                  this.loadBooks();
                })
                // .then(() => {
                //   return new Promise((resolve) => {
                //     setTimeout(resolve, 3000);
                //   });
                // })
                .catch((err) => {
                  alert('添加失败，请稍后重试');
                  throw err;
                });
            }
            // 修改
            else {
              requestPromise = axios({
                method: 'PATCH',
                url: `/books/${book.id}`,
                data: { name: book.name },
              })
                .then(() => {
                  this.loadBooks();
                  this.submitAction = 'add';
                })

                .catch((err) => {
                  alert('修改失败，请稍后重试');
                  throw err;
                });
            }

            requestPromise.then(() => {
              // 不管添加还是修改，完成后，都要重置表单
              this.formData.id = '';
              this.formData.name = '';
            });
          },
        },
        created() {
          this.loadBooks();
        },
      });
    </script>
  </body>
</html>
